<template>
  <div class="total">
    <HeaderNav />
    <div class="user-info">
      <div class="user-detail">
        <span class="avatar">
          <el-avatar size="0.1em" :src="userInfo.avatar" />
          <span class="name"> {{ userInfo.name }}</span>
        </span>
      </div>
    </div>
    <div class="favorites"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import HeaderNav from "@/components/common/HeaderNav.vue";

const userInfo = reactive({
  avatar:
    "https://img2.woyaogexing.com/2022/07/09/5ad8b0a6962a1989!400x400.jpg",
  name: "UserName",
});
</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
span {
  cursor: pointer;
}

.total {
  position: absolute;
  top: $item-height;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;

  .user-info {
    height: 3rem;
    width: 100%;
    .user-detail {
      margin: 0.4rem;
      width: 2rem;
      height: 2rem;
      background-color: grey;
      display: flex;
      flex-direction: column;
      align-content: center;

      .avatar {
        display: flex;
        .name {
          font-size: 0.1rem;
        }
      }
    }
  }

  .favorites {
    height: 3rem;
    width: 100%;
    background-color: burlywood;
  }
}
</style>
